<template>
  <div class="j_box">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="设备管理" name="1">
        <!-- 搜索区域 -->
        <div class="search-container">
          <el-form :model="searchForm" :inline="true" class="search-form">
            <el-form-item label="设备名称">
              <el-input v-model="searchForm.deviceName" placeholder="请输入设备名称" clearable />
            </el-form-item>
            <el-form-item label="设备类型">
              <el-select v-model="searchForm.deviceType" placeholder="请选择设备类型" clearable>
                <el-option label="GPS定位器" value="gps" />
                <el-option label="行车记录仪" value="recorder" />
                <el-option label="温度传感器" value="temperature" />
                <el-option label="油量传感器" value="fuel" />
              </el-select>
            </el-form-item>
            <el-form-item label="设备状态">
              <el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
                <el-option label="在线" value="online" />
                <el-option label="离线" value="offline" />
                <el-option label="故障" value="error" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleSearch">
                <el-icon>
                  <Search />
                </el-icon>
                搜索
              </el-button>
              <el-button @click="handleReset">
                <el-icon>
                  <Refresh />
                </el-icon>
                重置
              </el-button>
            </el-form-item>
          </el-form>
        </div>

        <!-- 操作按钮区域 -->
        <div class="action-container">
          <el-button type="primary" @click="handleAdd">
            <el-icon>
              <Plus />
            </el-icon>
            新增设备
          </el-button>
          <el-button type="success" @click="handleBatchImport">
            <el-icon>
              <Upload />
            </el-icon>
            批量导入
          </el-button>
          <el-button type="warning" @click="handleExport">
            <el-icon>
              <Download />
            </el-icon>
            导出数据
          </el-button>
        </div>

        <!-- 设备表格 -->
        <div class="table-container">
          <el-table v-loading="loading" :data="deviceList" stripe border style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="deviceId" label="设备ID" width="120" />
            <el-table-column prop="deviceName" label="设备名称" width="150" />
            <el-table-column prop="deviceType" label="设备类型" width="120">
              <template #default="{ row }">
                <el-tag :type="getDeviceTypeTag(row.deviceType)">{{ getDeviceTypeName(row.deviceType) }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="imei" label="IMEI号" width="160" />
            <el-table-column prop="vehicleNumber" label="车牌号" width="120" />
            <el-table-column prop="status" label="设备状态" width="100">
              <template #default="{ row }">
                <el-tag :type="getStatusTag(row.status)">{{ getStatusName(row.status) }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="lastOnlineTime" label="最后在线时间" width="180" />
            <el-table-column prop="installDate" label="安装日期" width="120" />
            <el-table-column prop="remarks" label="备注" min-width="150" show-overflow-tooltip />
            <el-table-column label="操作" width="200" fixed="right">
              <template #default="{ row }">
                <el-button type="primary" size="small" @click="handleEdit(row)">
                  <el-icon>
                    <Edit />
                  </el-icon>
                  编辑
                </el-button>
                <el-button type="info" size="small" @click="handleView(row)">
                  <el-icon>
                    <View />
                  </el-icon>
                  详情
                </el-button>
                <el-button type="danger" size="small" @click="handleDelete(row)">
                  <el-icon>
                    <Delete />
                  </el-icon>
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 分页组件 -->
        <div class="pagination-container">
          <el-pagination v-model:current-page="pagination.currentPage" v-model:page-size="pagination.pageSize"
            :page-sizes="[10, 20, 50, 100]" :total="pagination.total" layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
      </el-tab-pane>
      <el-tab-pane label="设备分类" name="2">Config</el-tab-pane>
    </el-tabs>

    <!-- 设备详情对话框 -->
    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="800px">
      <el-form ref="deviceFormRef" :model="deviceForm" :rules="deviceRules" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="设备名称" prop="deviceName">
              <el-input v-model="deviceForm.deviceName" placeholder="请输入设备名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备类型" prop="deviceType">
              <el-select v-model="deviceForm.deviceType" placeholder="请选择设备类型">
                <el-option label="GPS定位器" value="gps" />
                <el-option label="行车记录仪" value="recorder" />
                <el-option label="温度传感器" value="temperature" />
                <el-option label="油量传感器" value="fuel" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="IMEI号" prop="imei">
              <el-input v-model="deviceForm.imei" placeholder="请输入IMEI号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="车牌号" prop="vehicleNumber">
              <el-input v-model="deviceForm.vehicleNumber" placeholder="请输入车牌号" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="安装日期" prop="installDate">
              <el-date-picker v-model="deviceForm.installDate" type="date" placeholder="请选择安装日期" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备状态" prop="status">
              <el-select v-model="deviceForm.status" placeholder="请选择状态">
                <el-option label="在线" value="online" />
                <el-option label="离线" value="offline" />
                <el-option label="故障" value="error" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="备注" prop="remarks">
          <el-input v-model="deviceForm.remarks" type="textarea" :rows="3" placeholder="请输入备注信息" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSubmit">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search, Refresh, Plus, Upload, Download, Edit, View, Delete } from '@element-plus/icons-vue'

// 响应式数据
const activeName = ref('1')
const loading = ref(false)
const dialogVisible = ref(false)
const dialogTitle = ref('新增设备')
const deviceFormRef = ref()

// 搜索表单
const searchForm = reactive({
  deviceName: '',
  deviceType: '',
  status: ''
})

// 设备表单
const deviceForm = reactive({
  deviceId: '',
  deviceName: '',
  deviceType: '',
  imei: '',
  vehicleNumber: '',
  status: 'online',
  installDate: '',
  remarks: ''
})

// 表单验证规则
const deviceRules = {
  deviceName: [{ required: true, message: '请输入设备名称', trigger: 'blur' }],
  deviceType: [{ required: true, message: '请选择设备类型', trigger: 'change' }],
  imei: [{ required: true, message: '请输入IMEI号', trigger: 'blur' }],
  vehicleNumber: [{ required: true, message: '请输入车牌号', trigger: 'blur' }]
}

// 分页数据
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
})

// 设备列表数据
const deviceList = ref([
  {
    deviceId: 'DEV001',
    deviceName: 'GPS定位器-001',
    deviceType: 'gps',
    imei: '860123456789012',
    vehicleNumber: '京A12345',
    status: 'online',
    lastOnlineTime: '2024-01-15 14:30:25',
    installDate: '2024-01-01',
    remarks: '主要用于车辆定位'
  },
  {
    deviceId: 'DEV002',
    deviceName: '行车记录仪-002',
    deviceType: 'recorder',
    imei: '860123456789013',
    vehicleNumber: '京B67890',
    status: 'offline',
    lastOnlineTime: '2024-01-15 10:15:30',
    installDate: '2024-01-02',
    remarks: '记录行车过程'
  },
  {
    deviceId: 'DEV003',
    deviceName: '温度传感器-003',
    deviceType: 'temperature',
    imei: '860123456789014',
    vehicleNumber: '京C11111',
    status: 'error',
    lastOnlineTime: '2024-01-14 16:45:12',
    installDate: '2024-01-03',
    remarks: '监控车厢温度'
  }
])

// 选中的行
const selectedRows = ref([])

// 方法定义
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}

const handleSearch = () => {
  loading.value = true
  // 模拟搜索请求
  setTimeout(() => {
    loading.value = false
    ElMessage.success('搜索完成')
  }, 1000)
}

const handleReset = () => {
  Object.assign(searchForm, {
    deviceName: '',
    deviceType: '',
    status: ''
  })
  handleSearch()
}

const handleAdd = () => {
  dialogTitle.value = '新增设备'
  Object.assign(deviceForm, {
    deviceId: '',
    deviceName: '',
    deviceType: '',
    imei: '',
    vehicleNumber: '',
    status: 'online',
    installDate: '',
    remarks: ''
  })
  dialogVisible.value = true
}

const handleEdit = (row: any) => {
  dialogTitle.value = '编辑设备'
  Object.assign(deviceForm, { ...row })
  dialogVisible.value = true
}

const handleView = (row: any) => {
  ElMessage.info(`查看设备详情: ${row.deviceName}`)
}

const handleDelete = (row: any) => {
  ElMessageBox.confirm(
    `确定要删除设备 "${row.deviceName}" 吗？`,
    '删除确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    ElMessage.success('删除成功')
  })
}

const handleBatchImport = () => {
  ElMessage.info('批量导入功能开发中...')
}

const handleExport = () => {
  ElMessage.info('导出数据功能开发中...')
}

const handleSubmit = () => {
  deviceFormRef.value.validate((valid: boolean) => {
    if (valid) {
      ElMessage.success('保存成功')
      dialogVisible.value = false
    }
  })
}

const handleSelectionChange = (selection: any[]) => {
  selectedRows.value = selection
}

const handleSizeChange = (size: number) => {
  pagination.pageSize = size
  handleSearch()
}

const handleCurrentChange = (page: number) => {
  pagination.currentPage = page
  handleSearch()
}

// 辅助方法
const getDeviceTypeName = (type: string) => {
  const typeMap: Record<string, string> = {
    gps: 'GPS定位器',
    recorder: '行车记录仪',
    temperature: '温度传感器',
    fuel: '油量传感器'
  }
  return typeMap[type] || type
}

const getDeviceTypeTag = (type: string) => {
  const tagMap: Record<string, string> = {
    gps: 'primary',
    recorder: 'success',
    temperature: 'warning',
    fuel: 'info'
  }
  return tagMap[type] || ''
}

const getStatusName = (status: string) => {
  const statusMap: Record<string, string> = {
    online: '在线',
    offline: '离线',
    error: '故障'
  }
  return statusMap[status] || status
}

const getStatusTag = (status: string) => {
  const tagMap: Record<string, string> = {
    online: 'success',
    offline: 'info',
    error: 'danger'
  }
  return tagMap[status] || ''
}

onMounted(() => {
  pagination.total = deviceList.value.length
})
</script>

<style lang="scss" scoped>
.j_box {
  padding: 15px;
  background-color: #fff;
  min-height: 858px;

  .search-container {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;

    .search-form {
      .el-form-item {
        margin-bottom: 0;
      }
    }
  }

  .action-container {
    margin-bottom: 20px;
    display: flex;
    gap: 10px;
  }

  .table-container {
    margin-bottom: 20px;

    .el-table {
      border-radius: 8px;
      overflow: hidden;
    }
  }

  .pagination-container {
    display: flex;
    justify-content: flex-end;
    padding: 20px 0;
  }
}

:deep(.el-tabs__item) {
  font-size: 16px;
  font-weight: 500;
}

:deep(.el-table) {
  .el-table__header {
    background-color: #f5f7fa;
  }

  .el-table__row:hover {
    background-color: #f0f9ff;
  }
}

:deep(.el-button) {
  border-radius: 6px;
}

:deep(.el-tag) {
  border-radius: 4px;
}
</style>
